<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {margin:0; padding:0;}
    li{list-style:none; }

    #div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position:relative;}
    #div1 ul li{height:500px;opacity: 0;position: absolute;left: 0;top: 0;z-index: 0;transition: opacity 1.5s;}
    #div1 ul li.ac{z-index: 5;opacity: 1;}
    #div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6}
    #div1 ol li{width: 20px;height: 20px;background: #fff;margin-left: 5px;float: left;line-height: 20px;text-align: center;cursor: pointer;}
    #div1 ol li.ac{background: red;color: #fff;}
    #div1>a{text-decoration: none;position: absolute;top: 50%;margin-top: -10px;height: 40px;line-height: 32px;text-align: center;width: 40px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;}
    #goPrev{left: 0;}
    #goNext{right: 0;}
    img{width:850px; height:500px;}
  </style>
</head>
<body>
  <div id="div1">
    <ul>
        <li class="ac"><a href="javascript:alert(0);"><img src="1.jpg" /></a></li>
        <li><a href="javascript:alert(1);"><img src="2.jpg" /></a></li>
        <li><a href="javascript:alert(2);"><img src="3.jpg" /></a></li>
        <li><a href="javascript:alert(3);"><img src="4.jpg" /></a></li>
        <li><a href="javascript:alert(4);"><img src="5.jpg" /></a></li>
      </ul>
      <ol>
        <li class="ac">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ol>
      <a href="javascript:;" id="goPrev">&laquo;</a>
      <a href="javascript:;" id="goNext">&raquo;</a>
  </div>
  <script>
    var imgs = document.querySelectorAll('#div1 ul li')
    var btns = document.querySelectorAll('#div1 ol li')
    var goPrev = document.querySelector('#goPrev')
    var goNext = document.querySelector('#goNext')
    var box =document.querySelector('#div1')
    var index = 0
    var lastindex = 0
      btns.forEach((btn,i) => {
        btn.onclick = function(){
          lastindex = index
          index = i
          Acclass()
        }
      })
      goNext.onclick = function(){
        lastindex = index
        index++
        if(index === imgs.length){
          index = 0
        }
        Acclass()
      }
      goPrev.onclick = function(){
        lastindex = index
        index--
        if(index < 0){
          index = imgs.length-1
        }
        Acclass()
      }
      zdlb()
      function zdlb() {
          timer = setInterval(() => {
            goNext.onclick()
        },2000)
      }
      box.onmouseenter = function(){
        clearInterval(timer)
      }
      box.onmouseleave = function () {
        zdlb()
      }
      function Acclass () {
          btns[lastindex].classList.remove('ac')
          btns[index].classList.add('ac')
          imgs[lastindex].classList.remove('ac')
          imgs[index].classList.add('ac')
      }
  </script>
</body>
</html>